<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <script>
	    var html = document.getElementsByTagName('html')[0];
	    html.style.fontSize = html.clientWidth / 3.75 + "px";
    </script>
	<title>我的农庄</title>
	<link rel="stylesheet" href="../static/css/Reset.css" />
	<link rel="stylesheet" href="../static/css/myFarm.css" />
</head>
<body>
	<div id="myFarm" class="container">
		<div id="main">
			<div class="mainImage">
				<div class="imgYes" id="file-list">
					<img :src="farmInfo.coverPicUrl" alt="" />
				</div>
				<div class="imgNo" id="cameraImg">
					<img id="caeram" src="../static/images/camera.png" alt="" />
					<span id="uptext">请上传农庄封面</span>
				</div>
				<div id="myFarmImg">
					<div class="nullbox"></div>
				</div>
			</div>
			<ul class="farmList">
				<li @click="clickModify(1)" v-cloak>
					<span class="name">名称</span>
					<input type="text" class="nameVal" id="nickName" readonly="readonly" value="{{farmInfo.name}}" placeholder="请输入农庄名称" />
					<!--<span id="name" class="nameVal" v-cloak>{{farmInfo.name}}</span>-->
					<img class="rt" src="../static/images/go2.png" alt="" />
				</li>
				<li @click="clickModify(2)" v-cloak>
					<span class="name">地址</span>
					<input type="text" class="nameVal" id="areaAddr" readonly="readonly" value="{{farmInfo.area}}{{farmInfo.address}}" placeholder="请输入农庄地址" />
					<!--<span class="nameVal" v-cloak>{{farmInfo.area}}{{farmInfo.address}}</span>-->
					<img class="rt" src="../static/images/go2.png" alt="" />
				</li>
				<li @click="clickModify(3)" v-cloak>
					<span class="name">电话</span>
					<input type="text" class="nameVal" readonly="readonly" value="{{farmInfo.telephone}}" placeholder="请输入联系电话" />
					<!--<span class="nameVal" v-cloak>{{farmInfo.telephone}}</span>-->
					<img class="rt" src="../static/images/go2.png" alt="" />
				</li>
			</ul>
		</div>
		<!--名称-->
		<div id="addName" class="addName">
			<span class="nameSpan">农庄名称（2-8个字）</span>
			<div class="nameDiv">
				<input type="text" id="farmName" name="farmName" maxlength="8" placeholder="请输入农庄名称" value="{{farmInfo.name}}" />
			</div>
			<div @click="modifySubmit($event,1)" class="btn">保存</div>
		</div>
		<!--电话-->
		<div id="iphone" class="addName iphone">
			<span class="nameSpan">联系电话（手机号或固定电话均可）</span>
			<div class="nameDiv">
				<input type="tel" id="farmTel" name="farmTel" placeholder="请输入联系电话" value="{{farmInfo.telephone}}" />
			</div>
			<div @click="modifySubmit($event,3)" class="btn">保存</div>
		</div>
		<!--地址-->
		<div id="address" class="address">
			<div class="item" @click="clickModify(4)">
				<span>所在区域</span>
				<input type="text" class="adsInput" id="pcdAddress" name="pcdAddress" placeholder="省 > 市 > 区/县" readonly="readonly" value="" />
				<input type="hidden" name="pcdId" id="pcdId" value="" />
				<img class="rt" src="../static/images/go.png" alt="" />
			</div>
			<div class="item">
				<span>详细地址</span>
				<input type="text" class="detailAds" name="detailAddress" id="detailAddress" placeholder="请输入详细地址" value="" />
			</div>
			<div class="detailAddress">当前定位：<span id="detailAddress2"></span></div>
			<!--地图-->
			<div id="mapContainer" class="map"></div>
			<img class="position" src="../static/images/centerIcon.png"/>
			<div @click="modifySubmit($event,2)" class="btnAddress">保存</div>
		</div>
		<!--选择地区弹层-->
		<section id="areaLayer" class="express-area-box">
		    <header>
		        <h3>选择地区</h3>
		        <a v-show="isCity" @click="getProvince()" id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
		        <a v-show="isCout" @click="getCity($event)" id="" class="back backCity" href="javascript:void(0)" title="返回"></a>
		        <a id="closeArea"  @click="closeArea()" class="close" href="javascript:void(0)" title="关闭"></a>
		    </header>
		    <article id="areaBox">
		        <ul id="areaList" class="area-list" v-cloak>
		        	<li v-show="isProv" v-for="prov in provinceData" :id="prov.id" @click="getCity($event)">{{prov.areaName}}</li>
		        	<li v-show="isCity" v-for="city in cityData" :id="city.id" @click="getCounty($event)">{{city.areaName}}</li>
		        	<li v-show="isCout" v-for="coun in countyData" :id="coun.id" @click="overArea($event)">{{coun.areaName}}</li>
		        </ul>
		    </article>
		</section>
	</div>
</body>
<script src="https://api.map.baidu.com/api?v=2.0&ak=1BiZDIdoRV9iryDNcdF4oU37pqwftOin&s=1"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../libs/fastclick.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue-resource.min.js"></script>
<script type="text/javascript" src="../libs/webuploader.html5only.js"></script>
<script type="text/javascript" src="../libs/require.js"></script>
<script type="text/javascript" src="../libs/var.js"></script>
<script type="text/javascript" src="../libs/common.js"></script>
<script type="text/javascript" src="./js/myFarmImgUpload.js"></script>
<script type="text/javascript" src="./js/myFarm.js"></script>
</html>
